'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

const ColorPreview = () => {
  return (
    <div className="space-y-8 p-6">
      {/* 基础颜色 */}
      <Card className="bg-background text-foreground">
        <CardHeader>
          <CardTitle>基础颜色</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4">
            <div className="p-4 bg-background border rounded">
              背景色 (--background)：页面背景
            </div>
            <div className="p-4 bg-foreground text-background rounded">
              前景色 (--foreground)：主要文本颜色
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 主要颜色 */}
      <Card>
        <CardHeader>
          <CardTitle>主要颜色</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4">
            <Button className="bg-primary text-primary-foreground">
              主要按钮 (--primary)
            </Button>
            <Button
              variant="secondary"
              className="bg-secondary text-secondary-foreground"
            >
              次要按钮 (--secondary)
            </Button>
            <div className="p-4 bg-muted text-muted-foreground rounded">
              柔和背景 (--muted)：次要内容区域
            </div>
            <div className="p-4 bg-accent text-accent-foreground rounded">
              强调色 (--accent)：高亮或悬停状态
            </div>
            <Button
              variant="destructive"
              className="bg-destructive text-destructive-foreground"
            >
              危险操作 (--destructive)
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 组件颜色 */}
      <Card>
        <CardHeader>
          <CardTitle>组件颜色</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4">
            <div className="p-4 bg-card text-card-foreground border rounded">
              卡片颜色 (--card)
            </div>
            <div className="p-4 bg-popover text-popover-foreground border rounded">
              弹出层颜色 (--popover)
            </div>
            <div className="p-4 border rounded">边框颜色 (--border)</div>
            <div className="p-4 border-2 border-ring rounded">
              轮廓颜色 (--ring)：聚焦状态
            </div>
            <input
              className="p-2 border rounded w-full"
              placeholder="输入框 (--input)"
            />
          </div>
        </CardContent>
      </Card>

      {/* 图表颜色 */}
      <Card>
        <CardHeader>
          <CardTitle>图表颜色</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-5 gap-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div
                key={i}
                className={`p-4 bg-chart-${i} text-white rounded text-center`}
              >
                图表 {i}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default ColorPreview
